<template>
  <div class="sale-wraper">
    <img src="../assets/img/tea.jpg" alt="">
    <div>
      <em>{{dataobj.name}}</em>
      <span class="price">{{dataobj.price}}元</span>
      <a class="reduce"></a>
      <span class="num">{{spannum}}</span>
      <a class="plus" @click="changeNum(spannum+1)"></a>
      <!-- <a class="reduce" v-show="spannum!=0" @click="changeNum(spannum-1)"></a>
      <span class="num" v-show="spannum!=0" v-text="spannum"></span>
      <a class="plus" @click="changeNum(spannum+1)"></a> -->
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    props: {
      dataobj: {
        type: Object,
        default: { id: 0, name: "", price: 0, num: 0 }
      },
      order: {
        type: Object
      }
    },
    data() {
      return {
        spannum: 0
      }
    },
    mounted() {

    },
    methods: {
      changeNum(newNum) {
        if (newNum < this.spannum) {
            this.order.num -= 1;
            this.order.price -= this.dataobj.price;
            var target = this.dataobj
            var flag = this.order.list.find((n) => n.id === target.id);
            flag.num-=1;
            this.$emit("input", this.order);

        } else {

            var target = this.dataobj
            var flag = this.order.list.find((n) => n.id === target.id);
            if(flag){
                flag.num+=1;
            }else{
                this.dataobj.num = 1;
                this.order.list.push(this.dataobj);
            }
            this.order.num += 1;
            this.order.price += this.dataobj.price;
            this.$emit("input", this.order);
        }
        this.spannum = newNum;
        // console.log(this.order.list);

        // console.log(this.spannum);

        // console.log(this.dataobj.num);

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .sale-wraper {
    width: 100%;
    height: 1.7rem;
    background: #fff;
    margin-bottom: 0.1rem;
    box-sizing: border-box;
    border-radius: 0.1rem;
    padding: 0.2rem;
    display: flex;
  }

  .sale-wraper img {
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    border: 1px solid #aaa;
  }

  .sale-wraper>div {
    padding-left: 0.3rem;
    height: 100%;
    flex: 2 2 auto;
    position: relative;
  }

  .sale-wraper em {
    display: block;
    font-style: normal;
    font-weight: 500;
    font-size: 0.3rem;
  }

  .sale-wraper span.price {
    color: #f00;
    font-size: 0.3rem;
    position: absolute;
    bottom: 0rem;
  }

  .sale-wraper span.num {
    position: absolute;
    bottom: 0rem;
    right: 0.7rem;
    font-size: 0.28rem;
  }

  .sale-wraper a {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #f40;
    position: absolute;
    bottom: 0rem;
    right: 1.1rem;
    cursor: pointer;
  }

  .sale-wraper a:nth-of-type(2) {
    right: 0.1rem;
  }

  .sale-wraper a.reduce {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #f40
  }
</style>